<template>
  <div class="app-container" ref="appRef">
    <div style="display: flex; align-items: center; justify-content: space-between">
      <div>{{ $t('备货区') }}:</div>
      <el-select
        @change="getList"
        size="mini"
        filterable
        style="width: 240px; margin: 0 10px 0 5px"
        :placeholder="$t('货架')"
        v-model="queryParams.storageAreaId">
        <el-option :label="item.storageAreaName" :value="item.id" v-for="item in storageAreaList" />
      </el-select>
      <div>
        <!-- v-hasPermi="['distribution:distributorShopCombination:add']" -->
        <el-button type="primary" plain size="mini" @click="handleQueryProduct">
          {{ $t('产品查询') }}
        </el-button>
        <el-button
          v-hasPermi="['distribution:storageArea:createStorageArea']"
          type="success"
          plain
          size="mini"
          @click="handleCreateShelves">
          {{ $t('创建货架') }}
        </el-button>

        <el-button
          v-hasPermi="['distribution:storageArea:deleteStorageArea']"
          type="danger"
          :disabled="!queryParams.storageAreaId"
          plain
          size="mini"
          @click="handleDeleteShelves">
          {{ $t('删除货架') }}
        </el-button>
      </div>
    </div>
    <section class="table-main">
      <div style="overflow: auto">
        <div class="table-main-item" v-for="_ in tableData">
          <div v-for="item in _" class="item-wrapper">
            <div class="table-main-item_wrapper">
              <div class="table-main-item_wrapper-top">
                <div class="no">NO:{{ item.slotNo }}</div>
                <div v-if="item.skuId">
                  count: <span @click="handleInfo(item)" class="count">{{ item.skuNum }}</span>
                </div>
                <div v-else>空库位</div>
              </div>
              <div class="table-main-item_wrapper-bot">
                <div v-if="item.skuId" class="has-value">
                  <div>
                    skuNo: <span @click="handleInfo(item)" class="sku-no">{{ item.skuNo }}</span>
                  </div>
                  <div>
                    库位号:<span @click="handleInfo(item)">{{ item.spNo }} </span>
                  </div>
                  <div></div>
                </div>
                <div v-else class="no-value">
                  <el-button
                    @click="handleInStore(item)"
                    size="mini"
                    type="primary"
                    style="background: #8dc5f6">
                    入库
                  </el-button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="loading" v-if="loading">
        <i class="el-icon-loading"></i>
      </div>
    </section>
    <CreateShelves
      :show.sync="createShelves.show"
      @getListByCreate="getListByCreate"
      :formData="createShelves.formData" />
    <ProductSearch
      @getListByProductSearch="getListByProductSearch"
      :show.sync="productSearch.show"
      @getList="getList"
      :formData="productSearch.formData" />
    <InStore :show.sync="inStore.show" @getList="getList" :formData="inStore.formData" />
    <Info :show.sync="info.show" @getList="getList" :formData="info.formData" />
  </div>
</template>

<script>
import {
  deleteStorageArea,
  getStorageAreaSlotByStorageAreaId,
  listNoPage,
} from '@/api/distribution/sku/storageArea'

import CreateShelves from './components/createShelves.vue'
import ProductSearch from './components/productSearch.vue'
import InStore from './components/inStore.vue'
import Info from './components/info.vue'
export default {
  name: 'StorageArea',
  components: {
    CreateShelves,
    ProductSearch,
    InStore,
    Info,
  },
  data() {
    return {
      createShelves: {
        show: false,
        formData: {},
      },
      productSearch: {
        show: false,
        formData: {},
      },
      inStore: {
        show: false,
        formData: {},
      },
      info: {
        show: false,
        formData: {},
      },
      tableData: [],
      storageAreaList: [],
      loading: false,
      // 查询参数
      queryParams: {
        storageAreaId: '',
      },
    }
  },
  computed: {},
  watch: {
    tableData(newValue) {
      let max = 0
      newValue.map((item) => {
        if (item.length > max) {
          max = item.length
        }
      })
      // 设置CSS变量
      this.$refs['appRef']?.style.setProperty('--align-items', max > 7 ? 'flex-start' : 'center')
    },
  },
  created() {
    this.getStorageAreaList()
  },
  methods: {
    handleInfo(row) {
      this.info.formData = row
      this.info.show = true
    },
    handleInStore(row) {
      this.inStore.formData = row
      this.inStore.show = true
    },
    getListByProductSearch(data) {
      this.queryParams.storageAreaId = data.storageAreaId
      this.$message({ type: 'success', message: this.$t('操作成功') })
      this.getList()
    },
    getListByCreate(name) {
      listNoPage().then((res) => {
        const { code, data, msg } = res
        if (code === 200) {
          this.storageAreaList = res.data
          const index = this.storageAreaList.findIndex((i) => i.storageAreaName == name)
          this.queryParams.storageAreaId = this.storageAreaList[index]?.id
          this.getList()
        }
      })
    },
    /** 查询菜单列表 */
    getList() {
      this.loading = true
      getStorageAreaSlotByStorageAreaId({ storageAreaId: this.queryParams.storageAreaId })
        .then((res) => {
          const { code, data, msg } = res
          if (code === 200) {
            this.tableData = res.data?.reverse()
            // this.$message({ type: 'success', message: msg })
          }
        })
        .catch((err) => err)
        .finally(() => {
          this.loading = false
        })
    },
    getStorageAreaList() {
      listNoPage().then((res) => {
        const { code, data, msg } = res
        if (code === 200) {
          this.storageAreaList = res.data
        }
      })
    },
    handleQueryProduct() {
      this.productSearch.show = true
    },
    handleDeleteShelves() {
      this.$confirm(this.$t('库位全部sku清空才能删除，删除货架就会删除所有的库位?'), this.$t('提示'), {
        type: 'warning',
      })
        .then(() => {
          deleteStorageArea(this.queryParams.storageAreaId).then((res) => {
            const { code, data, msg } = res
            if (code === 200) {
              this.$message({ type: 'success', message: msg })
              this.queryParams.storageAreaId = ''
              this.tableData = []
              this.getStorageAreaList()
            }
          })
        })
        .catch((e) => e)
    },
    handleCreateShelves() {
      this.createShelves.show = true
    },
  },
}
</script>
<style lang="scss" scoped>
.app-container {
  height: calc(100vh - 84px);
  display: flex;
  flex-direction: column;
}
.table-main {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  overflow: auto;
  padding: 5px;
  flex: 1;
  //justify-content: flex-end;
  align-items: var(--align-items);
  position: relative;
  .loading {
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 30px;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.3);
  }

  &-item {
    height: 90px;
    display: flex;
    .item-wrapper {
      width: 180px;
      // border-radius: 7px;
      border: 0.5px solid #393939cc;
      font-size: 15px;
    }
    &_wrapper {
      height: 100%;
      padding: 15px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      &-top {
        flex: 1;
        width: 100%;
        display: flex;
        justify-content: space-between;
        .no {
          font-size: 16px;
          font-weight: 700;
          color: #f49696;
        }
        .count {
          cursor: pointer;
          color: #5178c6;
        }
      }
      &-bot {
        flex: 2;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;

        .has-value {
          cursor: pointer;
          .sku-no {
            color: #5178c6;
          }
        }
        .no-value {
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }
  }
}
</style>
